<template>
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="24">
          <!--          <a-col :span="12" v-show="formDisabled">-->
          <!--            <a-form-model-item label="平台账号编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ptzhbm">-->
          <!--              <a-input :disabled=true v-model="model.ptzhbm" placeholder="请输入平台账号编码"></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col :span="12" :hidden="true">
            <a-form-model-item label="流程名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle" >
              <a-input :max-length="255" :disabled="formDisabled" v-model="model.bpmBizTitle" placeholder="请输入流程名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ptzhbm">
              <a-input v-model="model.ptzhbm" placeholder="请输入单据编号" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <j-date
                placeholder="请选择申请时间"
                v-model="model.createTime"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm"
                style="width: 100%"
                disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">
              <!--              <select-user-by-dep-->
              <!--                :disabled=formDisabled-->
              <!--                v-model="model.proposer" disabled/>-->
              <select-user-by-dep
                :multi="false"
                placeholder="请选择申请人"
                v-model="model.proposer"
                disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">
              <j-select-depart placeholder="请选择申请部门" :disabled="(!model.id && !sfbg ) || formDisabled || sfbg || !model.transmitDataId" v-model="model.proposerDeptId" />
            </a-form-model-item>
          </a-col>
          <a-divider>基本信息</a-divider>
          <template v-if="sfbg">
            <a-col :span="12">
              <a-form-model-item label="变更类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="changeStatus">
                <j-dict-select-tag
                  placeholder="请选择变更类型"
                  v-model="model.changeStatus"
                  :disabled="formDisabled"
                  dictCode="platform_change_status">
                </j-dict-select-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="平台编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="plfId">
                <select-platform-account-input
                  :data-isolation="'bgr'"
                  :data-type="'emp'"
                  :disabled="formDisabled"
                  v-model="model.plfId"
                  @change="ptmcChange"
                  :triggerChange="true"/>
              </a-form-model-item>
            </a-col>
          </template>
          <a-col :span="12">
            <a-form-model-item label="平台名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ptmc">
              <a-input @change="changeTitle" :disabled="formDisabled || isCancel" v-model="model.ptmc" placeholder="请输入平台名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wz">
              <a-input :disabled="formDisabled || isCancel" v-model="model.wz" placeholder="请输入网址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="保管人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bgr">
              <!--              <select-user-by-dep-->
              <!--                :disabled=formDisabled-->
              <!--                v-model="model.bgr"/>-->
              <select-user-by-dep :disabled="formDisabled || isCancel" :multi="false" v-model="model.bgr" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="会员单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hydw">
              <a-input :disabled="formDisabled || isCancel" v-model="model.hydw" placeholder="请输入会员单位"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="登录名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dlm">
              <a-input :disabled="formDisabled || isCancel" v-model="model.dlm" placeholder="请输入登录名"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mm">
              <a-input :disabled="formDisabled || isCancel" v-model="model.mm" placeholder="请输入密码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="会员等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hydj">
              <a-input :disabled="formDisabled || isCancel" v-model="model.hydj" placeholder="请输入会员等级"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="会员有效期始" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hyyxqs">
              <a-col :span="12">
                <a-form-model-item prop="hyyxqs">
                  <a-date-picker
                    :disabled="formDisabled || isCancel"
                    placeholder="请选择开始时间"
                    valueFormat="YYYY-MM-DD"
                    farmat="YYYY-MM-DD"
                    @change="handleChangeNew"
                    v-model="model.hyyxqs"
                    style="width: 100%;" />
                </a-form-model-item>
              </a-col>
              <a-col :span="1" style="display: flex; justify-content: center; align-items: center">
                至
              </a-col>
              <a-col :span="11">
                <a-form-model-item prop="hyyxqe" >
                  <a-date-picker
                    valueFormat="YYYY-MM-DD"
                    farmat="YYYY-MM-DD"
                    :disabled="formDisabled || isCancel"
                    :disabled-date="disabledDateNew"
                    :default-picker-value="this.model.hyyxqs"
                    placeholder="请选择结束时间"
                    v-model="model.hyyxqe"
                    style="width: 100%;" />
                </a-form-model-item>
              </a-col>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="ca锁密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="casmm">
              <a-input :disabled="formDisabled || isCancel" v-model="model.casmm" placeholder="请输入ca锁密码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="ca锁个数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="casgs">
              <a-input-number
                :disabled="formDisabled || isCancel"
                :max="99999999"
                :min="0"
                v-model="model.casgs"
                placeholder="请输入ca锁个数"
                style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="ca锁有效期始" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="casyxqs">
              <a-col :span="12">
                <a-form-model-item prop="casyxqs">
                  <a-date-picker
                    :disabled="formDisabled || isCancel"
                    placeholder="请选择开始时间"
                    valueFormat="YYYY-MM-DD"
                    farmat="YYYY-MM-DD"
                    @change="handleChange"
                    v-model="model.casyxqs"
                    style="width: 100%; " />
                </a-form-model-item>
              </a-col>
              <a-col :span="1" style="display: flex; justify-content: center; align-items: center">
                至
              </a-col>
              <a-col :span="11">
                <a-form-model-item prop="casyxqe" >
                  <a-date-picker
                    :disabled="formDisabled || isCancel"
                    :disabled-date="disabledDate"
                    :default-picker-value="this.model.casyxqs"
                    valueFormat="YYYY-MM-DD"
                    farmat="YYYY-MM-DD"
                    placeholder="请选择结束时间"
                    v-model="model.casyxqe"
                    style="width: 100%" />
                </a-form-model-item>
              </a-col>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="12">
            <a-form-model-item label="ca锁有效期止" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="casyxqe">
              <j-date :disabled="formDisabled" placeholder="请选择ca锁有效期止" v-model="model.casyxqe" style="width: 100%" />
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bz">
              <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.bz" rows="4" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="平台注册授权联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platformContacts">
              <a-input :maxLength="200" :disabled="formDisabled || isCancel" v-model="model.platformContacts" placeholder="请输入联系人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platformContactsTel">
              <a-input :maxLength="200" :disabled="formDisabled || isCancel" v-model="model.platformContactsTel" placeholder="请输入联系方式"></a-input>
            </a-form-model-item>
          </a-col>
          <!--          <a-col :span="12" v-show="formDisabled">-->
          <!--            <a-form-model-item label="经办人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">-->
          <!--              <select-user-by-dep-->
          <!--                  :disabled=true-->
          <!--                  v-model="model.proposer"/>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="12" v-show="formDisabled">-->
          <!--            <a-form-model-item label="经办部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">-->
          <!--              &lt;!&ndash;<a-input :disabled=formDisabled v-model="model.jbbm" placeholder="请输入经办部门"  ></a-input>&ndash;&gt;-->
          <!--              <j-select-depart :disabled=true v-model="model.proposerDeptId"/>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->

          <!--          <a-col :span="24" v-show="formDisabled">-->
          <!--            <a-form-model-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">-->
          <!--              <j-date :disabled=true placeholder="请选择创建时间" v-model="model.createTime" style="width: 48%"/>-->

          <!--            </a-form-model-item>-->
          <!--          </a-col>-->

          <!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col> -->
        </a-row>
      </a-form-model>
      <common-flow-list v-if="formBpm && model.bpmStatus !== '1'" :formData="formData" style="margin-top: 10px"></common-flow-list>
    </j-form-container>
    <a-row :gutter="48">
      <a-col :span="24" style="text-align: center;margin-top: 15px">
        <a-button type="primary" v-if="formBpm" :style="{ marginRight: showFlowSubmitButton?'10px':'0px' }" @click="onPrint">打印</a-button>
        <a-button @click="submitForm('submit')" v-if="showFlowSubmitButton">提 交</a-button>
      </a-col>
    </a-row>
    <ErpOmcPlatformAccountFormPrint v-if="formBpm" class="print_style" id="platformContent" :formData="model" :formDataHistory="formData"></ErpOmcPlatformAccountFormPrint>
  </a-spin>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import SelectPlatformAccountInput from '@/views/scy/components/SelectPlatformAccountInput'
import { mapGetters } from 'vuex';
import moment from 'moment';
import CommonFlowList from '@/views/components/CommonFlowList.vue';
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
import Print from '@/utils/print/printarea.js';
import ErpOmcPlatformAccountFormPrint from './ErpOmcPlatformAccountFormPrint' // 打印
export default {
  name: 'ErpOmcPlatformAccountForm',
  components: {
    SelectUserByDep,
    SelectPlatformAccountInput,
    CommonFlowList,
    ErpOmcPlatformAccountFormPrint
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      confirmLoading: false,
      validatorRules: {
        proposerDeptId: [
          { required: true, message: '请选择申请部门!' }
        ],
        plfId: [
          { required: true, message: '请选择平台编号!' }
        ],
        changeStatus: [
          { required: true, message: '请选择变更类型!' }
        ],
        bpmBizTitle: [
          { required: true, message: '请输入流程名称!' }
        ],
        ptmc: [
          { required: true, message: '请输入平台名称!' }
        ],
        wz: [
          { required: true, message: '请输入网址!' },
          { pattern: /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/, message: '请输入正确的网址!' }
        ],
        bgr: [
          { required: true, message: '请输入保管人!' }
        ],
        hydw: [
          { required: true, message: '请输入会员单位!' }
        ],
        dlm: [
          { required: true, message: '请输入登录名!' }
        ],
        mm: [
          { required: true, message: '请输入密码!' }
        ],
        hyyxqs: [
          { required: true, message: '请输入会员有效期始!' }
        ],
        hyyxqe: [
          { required: true, message: '请输入会员有效期止!' }
        ],
        platformContactsTel: [
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的联系方式!' }
        ],
        casmm: [
          { required: true, message: '请输入ca锁密码!' }
        ],
        casyxqs: [
          { required: true, message: '请输入ca锁有效期始!' }
        ],
        casyxqe: [
          { required: true, message: '请输入ca锁有效期止!' }
        ]
      },
      url: {
        add: '/api/erp/omc/platformaccount/erpOmcPlatformAccount/add',
        edit: '/api/erp/omc/platformaccount/erpOmcPlatformAccount/edit',
        queryById: '/api/erp/omc/platformaccount/erpOmcPlatformAccount/queryById',
        generatedFormNumber: '/api/erp/base/generatedFormNumber'
      },
      sfbg: false,
      dictOptions: {}
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    },
    // 判断是否作废
    isCancel () {
      return this.model.changeStatus === 'invalid'
    }
  },
  created() {
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    // 加载数据字典信息
      this.initDictConfig();
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
  },
  methods: {
    ...mapGetters(['userInfo']),
    generatedFormNumber() {
      getAction(this.url.generatedFormNumber, { prefix: 'PTZH', subSystemCode: '05' }).then(res => {
        if (res.success) {
          this.$set(this.model, 'ptzhbm', res.result)
        }
      })
    },
    initDictConfig() {
      initDictOptions('erp_employee_file,name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'proposer', res.result)
        }
      })
    },
    add() {
      this.sfbg = false;
      this.edit(this.modelDefault);
      this.userName = this.userInfo().empName;// 申请人名称
      this.model.proposer = this.userInfo().empId; // 申请人
      this.model.proposerDeptId = this.userInfo().deptId; // 申请部门
      this.model.createTime = moment().format('YYYY-MM-DD HH:mm');
      this.generatedFormNumber();
      this.model.lx = 1
    },
    add2() {
      this.sfbg = true;
      this.edit2(this.modelDefault);
      this.userName = this.userInfo().empName;// 申请人名称
      this.model.proposer = this.userInfo().empId; // 申请人
      this.model.proposerDeptId = this.userInfo().deptId; // 申请部门
      this.model.createTime = moment().format('YYYY-MM-DD HH:mm');
      this.generatedFormNumber();
      this.model.lx = 2
    },
    edit(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.model.lx = record.lx;
      // fix:BUG#6104、6102 平台账号变更
      if (this.model.lx == '2') {
        this.sfbg = true;
      } else {
        this.sfbg = false;
      }
      this.$emit('unButtonDisable')
      /* let userInfo = store.getters.userInfo;
      this.model.proposer = userInfo.empId;
      this.model.proposerDeptId = userInfo.deptId;
      let date = new Date();
      this.model.createTime = date.getFullYear() +"-" + (date.getMonth() +1)
        + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        */

      this.visible = true;
    },
    edit2(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.model.lx = 2
      this.visible = true;
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId };
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result);
          }
        });
      }
    },
    ptmcChange(val) {
      // debugger
      getAction('/api/erp/omc/platformaccount/erpOmcPlatformAccountFinal/queryById', { id: val }).then((res) => {
        if (res.success) {
          let data = res.result.records || res.result
          // debugger;
          this.$set(this.model, 'plfId', val)
          this.$set(this.model, 'ptmc', data.ptmc) // 平台名称
          this.$set(this.model, 'bpmBizTitle', data.ptmc) // 标题
          this.$set(this.model, 'hydw', data.hydw) // 会员单位
          this.$set(this.model, 'wz', data.wz) // 网址
          this.$set(this.model, 'bgr', data.bgr) // 保管人
          this.$set(this.model, 'dlm', data.dlm) // 登录名
          this.$set(this.model, 'mm', data.mm) // 密码
          this.$set(this.model, 'hydj', data.hydj) // 会员等级
          this.$set(this.model, 'hyyxqs', data.hyyxqs)// 会员有效期始
          this.$set(this.model, 'hyyxqe', data.hyyxqe)// 会员有效期止
          this.$set(this.model, 'casmm', data.casmm)// ca锁密码
          this.$set(this.model, 'casgs', data.casgs)// ca锁个数
          this.$set(this.model, 'casyxqs', data.casyxqs)// ca锁有效期始
          this.$set(this.model, 'casyxqe', data.casyxqe)// ca锁有效期止
          this.$set(this.model, 'bz', data.bz) // 备注
          this.$set(this.model, 'ptzhbm', data.ptzhbm)
          this.$set(this.model, 'platformContacts', data.platformContacts)
          this.$set(this.model, 'platformContactsTel', data.platformContactsTel)
        }
      })
    },

    submitForm(type) {
      const that = this;
      if (type == 'draft') {
        // 代表保存草稿不做校验
        this.submit(type)
      } else if (type == 'submit') {
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.submit(type)
          } else {
            that.$emit('unButtonDisable')
          }
        })
      } else {
        console.log('传参数，保存：draft，提交：submit')
      }
    },
    submit (type) {
      const that = this;
      that.confirmLoading = true;
      this.model.bpmBizTitle = (this.model.ptmc ? this.model.ptmc + '-' : '') + filterMultiDictText(this.dictOptions['proposer'], this.model.proposer + '') + '-' + this.model.ptzhbm
      let httpurl = '';
      let method = '';
      if (!this.model.id) {
        httpurl += this.url.add;
        method = 'post';
      } else {
        httpurl += this.url.edit;
        method = 'put';
      }
      if (this.model.lx == '2') {
        this.model.status = this.model.changeStatus == 'invalid' ? '3' : '2'
      }
      httpAction(httpurl, this.model, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          if (method == 'post') {
            that.model.id = res.result;
          }
          that.$emit('ok', type, that.model);
        } else {
          that.$message.warning(res.message);
          that.$emit('unButtonDisable');
        }
      }).catch((error) => {
        that.$emit('unButtonDisable', error);
      }).finally(() => {
        that.confirmLoading = false;
      })
    },
    handleChange(value) {
      if (this.model.insuranceEndTime) {
        if ((this.model.insuranceEndTime).diff((this.model.casyxqs), 'days') < 0) {
          this.model.insuranceEndTime = this.model.casyxqs
        }
      }
    },
    disabledDate(current) {
      return current < moment(this.model.casyxqs).subtract('day')
    },
    handleChangeNew(value) {
      if (this.model.insuranceEndTime) {
        if ((this.model.insuranceEndTime).diff((this.model.hyyxqs), 'days') < 0) {
          this.model.insuranceEndTime = this.model.hyyxqs
        }
      }
    },
    disabledDateNew(current) {
      return current < moment(this.model.hyyxqs).subtract('day')
    },
    changeTitle() {
      this.model.bpmBizTitle = this.model.ptmc
    },

    // 点击打印
    onPrint () {
        let print = new Print({
          el: '#platformContent',
          popTitle: '平台账号申请详情 · 禾美环保',
          endCallback() {

          }
        })
      }
  }
}
</script>
<style scoped lang="less">
.fontDiy {
  margin: 0 9px;
  display: inline-block;
}
.print_style{
  position: absolute;
  top: 0;
  z-index: -1111;
}

</style>
<style>
  @import "../../../../../utils/print.css";
</style>
